import React, { useEffect, useState, setState } from "react"
import "./columnRight.less"
import * as echarts from 'echarts';
function ColumnRight() {
    const [state, setState] = useState({
        count: 0,
        genuine: 0,
        pirated: 0,
        other:0,
        wingenui:0,
        officegenui:0,
        winpirated: 0,
        officepirated: 0,
        os:0,
        app:0
      })
      const getTotalRatio = async() => {
        const url = "/api/asset/total";
        const response = await fetch(url);
        const data = await response.json();
        const url2 = "/api/asset/genuinenum";
        const response2 = await fetch(url2);
        const data2 = await response2.json();
        const url3 = "/api/asset/piratednum";
        const response3 = await fetch(url3);
        const data3 = await response3.json();
        var other = data.data - data2.data - data3.data;
        if(other > data.data || other < 0){
          other = 0;
        }
      
        const url4 = "/api/asset/wingenui";
        const response4 = await fetch(url4);
        const data4 = await response4.json();
        const url5 = "/api/asset/officegenui";
        const response5 = await fetch(url5);
        const data5 = await response5.json();
        const url6 = "/api/asset/winpirated";
        const response6 = await fetch(url6);
        const data6 = await response6.json();
        const url7 = "/api/asset/officepirated";
        const response7 = await fetch(url7);
        const data7 = await response7.json();
        const url8 = "/api/asset/osnum";
        const response8 = await fetch(url8);
        const data8 = await response8.json();
        const url9 = "/api/asset/appnum";
        const response9 = await fetch(url9);
        const data9 = await response9.json();
        //FIXME: 为了在雷达图中显著标识正版软件，将正版数据*10倍放大。
        var ratio = 10;
        setState({
          count: data.data,
          genuine: data2.data*ratio,
          pirated: data3.data,
          other: other,
          wingenui: data4.data,
          officegenui: data5.data,
          winpirated: data6.data,
          officepirated: data7.data,
          os: data8.data,
          app: data9.data
        }); 
        console.log("fetch radar total num/genuine/pirated/os/app ", data.data, data2.data, data3.data, data8.data, data9.data);   
        return data.data;
      }    
    useEffect(() => {
        var chartDom = document.getElementById('main3');
        var myChart = echarts.init(chartDom);
        var option;
        getTotalRatio();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: 'rgba(0,0,0,0.2)',
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            singleAxis: {
                top: 50,
                bottom: 50,
                axisTick: {},
                axisLabel: {},
                type: 'time',
                axisPointer: {
                    animation: true,
                    label: {
                        show: true
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        opacity: 0.2
                    }
                }
            },
            series: [
                {
                    type: 'themeRiver',
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 20,
                            shadowColor: 'rgba(0, 0, 0, 0.8)'
                        }
                    },
                    data: [
                        ['2023/01/01', state.wingenui, '正版WINDOWS'],
                        ['2023/01/01', state.winpirated, '非正版WINDOWS'],
                        ['2023/01/02', state.wingenui, '正版WINDOWS'],
                        ['2023/01/02', state.winpirated, '非正版WINDOWS'],
                    ]
                }
            ]
        };

        option && myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }, [state.count])
    useEffect(() => {
        var chartDom = document.getElementById('main4');
        var myChart = echarts.init(chartDom);
        var option;
        getTotalRatio();
        // Generate data
        let category = [];
        let dottedBase = +new Date();
        let lineData = [];
        let barData = [];
        for (let i = 0; i < 1; i++) {
            let date = new Date((dottedBase += 3600 * 24 * 1000));
            category.push(
                [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
            );
            let b = state.officegenui;
            let d = state.officepirated;
            barData.push(b);
            lineData.push(d);
        }
        // option
        option = {
            // backgroundColor: '#0f375f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['非正版', '正版'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: {
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [
                {
                    name: '非正版',
                    type: 'line',
                    smooth: true,
                    showAllSymbol: true,
                    symbol: 'emptyCircle',
                    symbolSize: 15,
                    data: lineData
                },
                {
                    name: '正版',
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        borderRadius: 5,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#14c8d4' },
                            { offset: 1, color: '#43eec6' }
                        ])
                    },
                    data: barData
                }
            ]
        };

        option && myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }, [state.count])
    useEffect(() => {
        var chartDom = document.getElementById('main5');
        var myChart = echarts.init(chartDom);
        var option;
        getTotalRatio();
        // Schema:
        // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
        const dataBJ = [
            [1, state.app],
            [2, state.app],
            [3, state.app]
        ];
        var dataSH = [
            [1, state.other],
            [2, state.other],
            [3, state.other]
        ];
        var schema = [
            { name: 'date', index: 0, text: '日期' },
            { name: 'AQIindex', index: 1, text: '总数' }
        ];
        var lineStyle = {
            width: 1,
            opacity: 0.5
        };
        option = {
            // backgroundColor: '#333',
            legend: {
                bottom: 30,
                data: ['应用软件', '免费或其他许可'],
                itemGap: 20,
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1
            },
            parallelAxis: [
                {
                    dim: 0,
                    name: schema[0].text,
                    inverse: true,
                    max: 31,
                    nameLocation: 'start'
                },
                { dim: 1, name: schema[1].text }
            ],
            visualMap: {
                show: true,
                min: 0,
                max: 150,
                dimension: 2,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                    // colorAlpha: [0, 1]
                }
            },
            parallel: {
                left: '5%',
                right: '18%',
                bottom: 100,
                parallelAxisDefault: {
                    type: 'value',
                    name: 'AQI指数',
                    nameLocation: 'end',
                    nameGap: 20,
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#aaa'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#777'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                }
            },
            series: [
                {
                    name: '应用软件',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataBJ
                },
                {
                    name: '免费或其他许可',
                    type: 'parallel',
                    lineStyle: lineStyle,
                    data: dataSH
                }
            ]
        };

        option && myChart.setOption(option);
        // 监听浏览器缩放，图表对象调用缩放resize函数
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }, [state.count])
    return (
        <div className="column">
            <div className="panel bar">
                <h2>操作系统使用对比</h2>
                <div className="chart" id="main3">图标</div>
                <div className="panel-footer"></div>
            </div>
            <div className="panel line">
                <h2>Office使用对比</h2>
                <div className="chart" id="main4"></div>
                <div className="panel-footer"></div>
            </div>
            <div className="panel pie">
                <h2>应用软件中免费软件使用对比</h2>
                <div className="chart" id="main5"></div>
                <div className="panel-footer"></div>
            </div>
        </div>
    )
}
export default ColumnRight